<template>
    <div class="share-common">
        <!-- wrapper -->
        <div class="wrapper">
            <img src="../images/sharelanding_head.jpg" width="100%">
            <img src="../images/share_demo.jpg" width="100%">
            <!-- <div class="share-common__main">
                <div class="loan-detail-header">
                    <div class="loan-detail-user">
                        <span class="loan-detail-user__avatar"><img :src="placeholderImg" alt=""></span>
                        <div class="loan-detail-user__info">
                            <p class='name'>陈晨</p>
                            <p>出借人</p>
                        </div>
                        <span class="button short transparent">信用报告</span>
                    </div>
                </div>
                <div class="loan-out-card card">
                    <p class="loan-number">编号: {{number}}</p>
                    <div class="card__header no-border">
                        <div class="loan-money">
                            <p class="loan-money__info loan-out">可借额度</p>
                        </div>
                        <div class="fundraising-info">
                            <p class="loan-money__amount purple">300～1000元</p>
                        </div>
                    </div>
                    <ul class="loan-out-info">
                        <li class="loan-out-info__item">
                            <p>3个月-6个月</p>
                            <span>可借时长</span>
                        </li>
                        <li class="loan-out-info__item">
                            <p>20%</p>
                            <span>年利率</span>
                        </li>
                        <li class="loan-out-info__item">
                            <p>还本付息</p>
                            <span>还款方式</span>
                        </li>
                    </ul>
                </div>
            </div> -->


            
        </div>
            
        <!-- footer -->

        <footer class="single-button">
            <span class="button" @click='goLoanInApply'>马上申请</span>
        </footer>

        <modal
            :show='show_modal_qr'
            @close='show_modal_qr = false'
            transparent>
            <div class="modal-qr">
                <img src="../images/qr.png" width="240">
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import confirm from '../components/Confirm.vue'
    import modal from '../components/Modal.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import { timeToHours } from '../filters/filter-timeFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { loanOutApi, contactApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            confirm,
            modal
        },
        filters:{
            toYuan,
            dateFormat,
            timeToHours
        },
        data() {
            return {
                placeholderImg:require('../images/loading_1.png'),
                number:this.$route.params.number,
                pageLoaded:false,
                isMyPublishLend:false,
                detail:{},
                userInfo:{},
                show_modal_close_loan_out:false,
                show_modal_open_loan_out:false,
                show_modal_loan_detail:false,
                show_modal_qr:false,
                argeement:true,
                payway:-1,
                payPasswordShow:false,
                payStatus:'',
                password:'',
                placeholder:'--',
                userCount:'',
                listInfo:{},
                records:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            storeUserInfo(){
                return this.localInfo.userInfo
            },
            needLogin(){
                return this.localInfo.needLogin
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'removeLoanInForm',
                'setGoHome'
            ]),
            goApply(){
                this.$router.push({
                    name:'loan-out-apply'
                })
            },
            goLoanInApply(){
                if(!this.storeUserInfo.isFocus){
                    this.show_modal_qr = true
                    return
                }
                if(!this.needLogin){

                    this.setGoHome(true)
                    this.$router.push({
                        name:'loan-in-index',
                    })
                }
                else{
                    this.setGoHome(true)
                    this.$router.push({
                        name:'bind-phone',
                    })
                }

            },
        },
        created(){
            this.setGoHome(false)
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .share-common{
        .wrapper{
            padding-bottom: 100px;
        }
        .loan-out-card{
            padding-top: 0;
            margin:0;
            box-shadow:none;
        }
        .share-common__main{
            padding: 16px;
            padding-bottom: 100px;
        }
    }

</style>
